//页面中的数据
var data = [
    {id:1,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:2,name:'李梦辰',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'王大力',registration:'2020-11-12'},
    {id:3,name:'王海峰',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'王仁',registration:'2020-11-12'},
    {id:4,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'李海',registration:'2020-11-12'},
    {id:5,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'张国焘',registration:'2020-11-12'},
    {id:6,name:'张晓雅',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:7,name:'王海峰',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:8,name:'张晓雅',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'张国焘',registration:'2020-11-12'},
    {id:9,name:'李梦辰',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'汪峰',registration:'2020-11-12'},
    {id:10,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'系统',registration:'2020-11-12'},
    {id:11,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:12,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'王大力',registration:'2020-11-12'},
    {id:13,name:'张晓雅',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'系统',registration:'2020-11-12'},
    {id:14,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'系统',registration:'2020-11-12'},
    {id:15,name:'王海峰',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:16,name:'李梦辰',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:17,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'李海',registration:'2020-11-12'},
    {id:18,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'汪峰',registration:'2020-11-12'},
    {id:19,name:'张晓雅',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:20,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:21,name:'李梦辰',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:22,name:'张晓雅',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'李海',registration:'2020-11-12'},
    {id:23,name:'王海峰',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'系统',registration:'2020-11-12'},
    {id:24,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:25,name:'张晓雅',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'王仁',registration:'2020-11-12'},
    {id:26,name:'李梦辰',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'王大力',registration:'2020-11-12'},
    {id:27,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'系统',registration:'2020-11-12'},
    {id:28,name:'王海峰',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:29,name:'张晓雅',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:30,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:31,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'王仁',registration:'2020-11-12'},
    {id:32,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:33,name:'王海峰',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'汪峰',registration:'2020-11-12'},
    {id:34,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'系统',registration:'2020-11-12'},
    {id:35,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'张国焘',registration:'2020-11-12'},
    {id:36,name:'李梦辰',contiguity:'1232',sex:'女',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:37,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'系统',registration:'2020-11-12'},
    {id:38,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'系统',registration:'2020-11-12'},
    {id:39,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'普通病例',registrant:'王大力',registration:'2020-11-12'},
    {id:40,name:'张晓雅',contiguity:'1232',sex:'男',identity:'320729188872318',tel:'17768089879',registered:'江苏省/苏州市/姑苏区',current:'江苏省/苏州市/姑苏区',case:'协查病例',registrant:'王仁',registration:'2020-11-12'},
];
//当前的页码
var page = 1;
//每页的条数
var count = 10;
////获取tbody
var oTBody = document.querySelector('tbody');
//获取分页容器
var oPagination = document.querySelector('.pagination');
//获取上一页的按钮
var oPrevBtn=document.querySelector('.prev')
//获取下一页的按钮
var oNextBtn=document.querySelector('.next')
//页面初始化的渲染功能
function render() {
    //让table为空
    oTBody.innerHTML = '';
    //根据count和page准备要渲染的数据
    var renderArr = data.slice((page - 1) * count, page * count);
    //循环要渲染的数据
    for (var i = 0; i < renderArr.length; i++) {
        //创建tr
        var oTr = document.createElement('tr');
        //给tr创建内容
        oTr.innerHTML = `
        <td>${renderArr[i].id}</td>
        <td>${renderArr[i].name}</td>
        <td>${renderArr[i].contiguity}</td>
        <td>${renderArr[i].sex}</td>
        <td>${renderArr[i].identity}</td>
        <td>${renderArr[i].tel}</td>
        <td>${renderArr[i].registered}</td>
        <td>${renderArr[i].current}</td>
        <td>${renderArr[i].case}</td>
        <td>${renderArr[i].registrant}</td>
        <td>${renderArr[i].registration}</td>
        <td>
            <button class="btn btn-primary edit">编辑</button>
            <button class="btn btn-warning del">删除</button>
            <button class="btn btn-danger see">详情</button>
        </td>
    `;
        //把tr创建到tbody里面
        oTBody.appendChild(oTr);
    }

    //渲染页码
    //找到所有的1，2，3，4的页码
    var aPageBtn = document.querySelectorAll('.pageBtn');
    //删除所有的页码
    for(var i=0;i<aPageBtn.length;i++){
        oPagination.removeChild(aPageBtn[i].parentNode);
    }
    //根据数据的长度重新创建页码
    for (var i = 1; i <= Math.ceil(data.length / count); i++) {
        //创建li
        var oLi = document.createElement('li');
        //给li创建内容
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        //如果li和当前的页码一致，给他加一个选中的class
        if (i == page) {
            oLi.classList.add('active');
        }
        //在下一页的前面插入页码
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}
//一上来就渲染一次数据
render();
//给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
    //如果当前点击的按钮有pageBtn这个class名字
    if (event.target.className == 'pageBtn') {
        //修改全局的page
        page = event.target.innerText;
        //渲染table，渲染分页
        render();
    }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener('click',prev);
oNextBtn.addEventListener('click',next);
function prev(){
    if(page>1){
        page--;
        render();
    }
}
function next(){
    if(page<Math.ceil(data.length / count)){
        page++;
        render();
    } 
}

//删除功能
oTBody.addEventListener('click',del);
function del(){
    if(event.target.className.includes('del')){
        //找到id
        var id=event.target.parentNode.parentNode.children[0].innerText;
        //循环数据对比
        for(var i=0;i<data.length;i++){
            if(data[i].id==id){
                //删除id所对应的数据
                data.splice(i,1);
            }
        }
        //重新渲染
        render();
    }
}


//给所以的编辑按钮加事件
oTBody.addEventListener('click',openEdit);
function openEdit(){
    //判断事件源
    if(event.target.className.includes('edit')){
    //让编辑框显示
    $('#editModal').modal('show');//显示模态框
    //确认是那个id的数据
    var id = event.target.parentNode.parentNode.children[0].innerText;
    //循环数据，找到对应的id，给编辑框赋值
    for(var i=0;i<data.length;i++){
        if(data[i].id==id){
            document.querySelector('.editId').value=data[i].id;
            document.querySelector('.editName').value=data[i].name;
            document.querySelector('.editContiguity').value=data[i].contiguity;
            // document.querySelector('.editSex').value=event.target.parentNode.parentNode.children[3];
            if(data[i].sex=='女'){
                document.querySelector('#editRadio2').checked = true;
            }
            document.querySelector('.editIdentity').value=data[i].identity;
            document.querySelector('.editTel').value=data[i].tel;
            document.querySelector('.editRegistered').value=data[i].registered;
            document.querySelector('.editCurrent').value=data[i].current;
            document.querySelector('.editCase').value=data[i].case;
            document.querySelector('.editRegistrant').value=data[i].registrant;
            document.querySelector('.editRegistration').value=data[i].registration;
            }
        }
    }
}

//点击修改保存
var editBtn = document.querySelector('.editBtn');
editBtn.onclick = function(){
    var str = document.querySelector('.editTel').value;
    if(reg.test(str)){
        editBtn.addEventListener('click',editFn);
        function editFn(){
            //替换的某一条
            var id = document.querySelector('.editId').value;
            //循环数据，找到对应的更改
            for(var i=0;i<data.length;i++){
                if(data[i].id==id){
                    data[i].name = document.querySelector('.editName').value;
                    data[i].contiguity = document.querySelector('.editContiguity').value;
                    data[i].sex = document.querySelector('#editRadio1').checked?'男':'女';
                    data[i].identity = document.querySelector('.editIdentity').value;
                    data[i].tel = document.querySelector('.editTel').value;
                    data[i].registered = document.querySelector('.editRegistered').value;
                    data[i].current = document.querySelector('.editCurrent').value;
                    data[i].case = document.querySelector('.editCase').value;
                    data[i].registrant = document.querySelector('.editRegistrant').value;
                    data[i].registration = document.querySelector('.editRegistration').value;
                }
            }
            render();//重新渲染
            $('#editModal').modal('hide');//关闭模态框
        }
    }else{
        alert('请输入正确的手机号')
    }
}


//查看详情
// var seeBtn = document.querySelector('.seeBtn')
oTBody.addEventListener('click',seeFn);
function seeFn(){
    if(event.target.className.includes('see')){
        // alert(event.target.parentNode.parentNode.innerText);
    $('#seeModal').modal('show');//显示模态框
    var id = event.target.parentNode.parentNode.children[0].innerText;
    for(var i=0;i<data.length;i++){
        if(data[i].id==id){
            document.querySelector('.seeId').value = data[i].id;
            document.querySelector('.seeName').value = data[i].name;
            document.querySelector('.seeContiguity').value = data[i].contiguity;
            if(data[i].sex=='女'){
                document.querySelector('#seeRadio2').checked = true;
            }
            document.querySelector('.seeIdentity').value = data[i].identity;
            document.querySelector('.seeTel').value = data[i].tel;
            document.querySelector('.seeRegistered').value = data[i].registered;
            document.querySelector('.seeCurrent').value = data[i].current;
            document.querySelector('.seeCase').value = data[i].case;
            document.querySelector('.seeRegistrant').value = data[i].registrant;
            document.querySelector('.seeRegistration').value = data[i].registration;
            }
        }
    }
}


//新增
var addBtn = document.querySelector('.addBtn');
var reg = /^1[3-9]\d{9}$/;
addBtn.onclick = function(){
    var str = document.querySelector('.addTel').value;
    if(reg.test(str)){
        // alert('输入正确')
        addBtn.addEventListener('click',addFn);
        function addFn(){
            var addId = document.querySelector('.addId').value;
            var addName = document.querySelector('.addName').value;
            var addContiguity = document.querySelector('.addContiguity').value;
            // console.log(addId,addName);
            var addSex = document.querySelectorAll('#inlineRadio1').checked?'男':'女';
            var addIdentity = document.querySelector('.addIdentity').value;
            var addTel = document.querySelector('.addTel').value;
            var addRegistered = document.querySelector('.addRegistered').value;
            var addCurrent = document.querySelector('.addCurrent').value;
            var addCase = document.querySelector('.addCase').value;
            var addRegistrant = document.querySelector('.addRegistrant').value;
            var addRegistration = document.querySelector('.addRegistration').value;
            // console.log(addId,addName,addSex,addIdentity,addTel,addCurrent);
            data.push({
                id:addId,
                name:addName,
                contiguity:addContiguity,
                sex:addSex,
                // date:addDate,
                identity:addIdentity,
                tel:addTel,
                registered:addRegistered,
                current:addCurrent,
                case:addCase,
                registrant:addRegistrant,
                registration:addRegistration
            })
            render();
            $('#addModal').modal('hide');//关闭模态框
        }
    }else{
        alert('请输入正确的手机号');
    }
}

//获取查询的输入框和按钮
var oInp = document.querySelectorAll('.form-group input');
var oQuery = document.querySelector('.query');
oQuery.addEventListener('click',queryFn);
function queryFn(){
    var str = oInp[0].value;
    var renderData = [];//
    for(var i=0;i<data.length;i++){
        if(data[i].name.includes(str)){
            renderData.push(data[i])
        }
    }
}

//重置
var oReset = document.querySelector('.reset');
oReset.addEventListener('click',resetFn);
function resetFn(){
    $("input[type=reset]").trigger("click");
}